<template>
  <div>
    <Grid :searchQuery="g1qry" :proplist="g1list" :str="customcomponent" :mycols="cols1" :url="url1">
    </Grid>

    <br>
    <br>
    <br>

    <Grid :searchQuery="g2qry" :proplist="g2list" :str="'customcomponent2'" :mycols="cols2" :url="url2">
    </Grid>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import Grid from '../components/Grid1.vue'
  import Vue from 'Vue'

  console.log('=========================')
  console.log(Grid.components)

  var config = require('../../config')

  console.log('create moregrid')


  export default {
    data () {
      return {
        url1: config.dev.server+'/vue/main/qryStudent',
        url2: config.dev.server+'/vue/main/qryStudent',
        customcomponent: 'customcomponent1',
        cols1: [
          {
            name: '姓名',
            col: 'name',
            show: true,
            type: 'button-component',
            sort: true,
            sortType: 'desc'
          }, {
            name: '年龄',
            col: 'age',
            show: true,
            type: 'a-component',
            sort: true,
            sortType: 'desc'
          }, {
            name: '性别',
            col: 'sex',
            show: true
          }, {
            name: '备注',
            col: 'desc',
            show: true
          }, {
            name: '删除',
            col: 'delete',
            show: true,
            type: 'delete-component'
          }],
        cols2: [
          {
            name: '姓名',
            col: 'name',
            show: true
          }, {
            name: '年龄',
            col: 'age',
            show: true,
            type: 'button-component'
          }, {
            name: '性别',
            col: 'sex',
            show: true,
            type: 'button-component'
          }, {
            name: '备注',
            col: 'desc',
            show: false
          }]
      }
    },
    components: {
      Grid
    },
    computed: {
      g1list: function () {
        return [
          {
            name: '张三123',
            age: 55,
            sex: 'female123'
          }, {
            name: '张三2',
            age: 66,
            sex: 'male'
          }, {
            name: '张三3',
            age: 77,
            sex: 'male'
          }, {
            name: '张三4',
            age: 88,
            sex: 'female123'
          }]
      },
      g2list: function () {
        return [
          {
            name: 'g2list',
            age: 55,
            sex: 'female123'
          }, {
            name: '2张三2',
            age: 66,
            sex: 'male'
          }, {
            name: '2张三3',
            age: 77,
            sex: 'male'
          }, {
            name: '2张三4',
            age: 88,
            sex: 'female123'
          }]
      },
      g1qry: function () {
        return 'g1qry'
      },
      g2qry: function () {
        return 'g2qry'
      },
      ...mapGetters({
        mycols: 'initCols',
        mylist: 'initDataList',
        loading: 'loading'
      })
    },
    methods: {
      updateSearchQuery: function (value) {
        this.$store.commit('updateSearchQuery', value)
      }
    },
    created () {
      var sto = this.$store
      //不知道下面为什么this.$sotre找不到  在外面定义好吧
      //当创建好之后请求数据库
//      this.$axios.get('http://localhost:8080/nmis-main/main/main.json?zz=123')
//        .then(function (json) {
//          console.log(json);
//          sto.dispatch('initListLoad', json.data.list)
//        })
//        .catch((error) => {
//          sto.commit('loading')
//          alert('ajax请求数据失败');
//          console.log(error);
//        });
    }
  }

</script>
